<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>计算属性</title>
</head>

<body>
    <div id="main">
        {{getTimeStamp()}}
        <!--方法的调用，在methods中定义--->
        {{getTimeStamp2}}
        <!--计算属性的调用，在computed中定义--->
        <!--方法获取-->
        <!-- {{money.split("").reverse().join("")}} -->
    </div>

</body>
<script>

    let vue = new Vue({
        el: "#main",
        data: {
            money: "10000",
            power: '书记',
            name: '张',
            
        },
        methods: {
            money: function () {
                return "$" + this.money
            }
        },
        methods: {
            getTimeStamp: function () {
                let time = new Date().getTime();
                return time;
            },
            
        },
        computed: {
            //计算属性,计算属性有缓存，那问题来了，什么时候跟新
            //啥时候用属性，啥时候用方法?
            getTimeStamp2: function () {
                // this.money;//只要属性跟新了，计算属性的值就会刷新
                // this.power;//
                // let time = new Date().getTime();
                // return time;
                return this.name + this.power
            }
        }
    });

</script>

</html>